<template>
	<view>
		<no-data v-if="!list || list.length<1"></no-data>
		<view v-else
			v-for="(item, index) in list" :key="index"
			@click="navTo(`/pages/course/course-play?id=${item.id}`, {login: true})"
			class="course-item center">
			<view class="item-left column">
				<text class="title text-ellipsis">{{ item.title }}</text>
				<view>
					<text class="per">已学{{ item.percent }}%</text>
					<!-- 进度条组件 -->
					<progress :percent="item.percent" activeColor="#345DC2" stroke-width="2"></progress>
				</view>
			</view>
			<!-- 右侧课程图片 -->
			<view class="right">
				<image :src="item.mainImage" lazy-load></image>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/course.js'

	export default {
		data() {
			return {
				list: null,
			}
		},

		onLoad() {
			this.loadData()
		},

		methods: {

			async loadData() {
				uni.showLoading({title: '加载中',mask: true})
				// 调用API获取学习课程列表
				const {code, message, data} = await api.getCourseStudyList()
				uni.hideLoading()
				if(code === 20000) {
					this.list = data
				}else {
					this.$util.msg(message)
				}
			}

		}
	}
</script>

<style lang="scss">
	// 课程项样式
	.course-item {
		width: 100%;           // 宽度100%
		padding: 30rpx 0;      // 上下内边距
		.item-left {
			justify-content: space-between;  // 子元素两端对齐
			width: 435rpx;       // 宽度
			height: 150rpx;      // 高度
			margin-right: 20rpx; // 右外边距
			.title {
				font-size: 28rpx;  // 字体大小
				font-weight: bold; // 字体加粗
				line-height: 35rpx; // 行高
			}
			.per {
				font-size: 28rpx;          // 字体大小
				color: $mxg-text-color-grey; // 字体颜色
				line-height: 50rpx;        // 行高
			}
		}

		.right {
			image {
				width: 245rpx;     // 宽度
				height: 150rpx;    // 高度
				border-radius: 10rpx; // 圆角
			}
		}

	}
</style>
